<template>
    <div id="app">

    <mt-header  title="发表":fixed="is_fixed" >
         			<router-link to="/index" slot="left">
         				<mt-button icon="back">返回</mt-button>
         			</router-link>
    </mt-header>

<div id="qq">
	<p>有什么新鲜事想告诉大家?</p>
	<div class="message" contentEditable='true'></div>

	<div class="But">

		<span class='submit'>发表</span>
		<el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              :closable="true"
              :close-transition="false"
              @close="handleClose(tag)"
            >
            {{tag}}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="mini"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+Tag</el-button>
	</div>


	<p><span class="date" test="center"> 上传图片</span></p>

	<el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
     <div class="ui-form-item ui-form-item-switch ui-border-b" >
     <p> 自动更新心情</p>
                <label class="ui-switch">
                    <input type="checkbox">
                </label>
            </div>
    <el-tag>伤心</el-tag>
    <el-tag type="gray">难过</el-tag>
    <el-tag type="primary">开心</el-tag>
    <el-tag type="success">惊讶</el-tag>
    <el-tag type="warning">不安</el-tag>
    <el-tag type="danger">激动</el-tag>

<br>
</div>

    </div>
</template>
<script>
import Vue from 'vue'
import { Header } from 'mint-ui';

Vue.component('mt-header', Header);

    export default {
        name:'app',
        data () {
            return {
                is_fixed:true,
                dynamicTags: ['古诗', '现代','诗散文'],
                inputVisible: false,
                inputValue: ''
            };
        },
        methods: {
              handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
              },

              showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                  this.$refs.saveTagInput.$refs.input.focus();
                });
              },

              handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                  this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
              }
            }

                 
    }
</script>
<style>
.check{
text-align:left;
color:white;
top:-10px;
}

.mt-cell{
text-align:left;
color:white;
top:50px;
}
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

*{margin:0px; padding:0px;}

#qq{width:100%;/*宽*/height:170px;/*高*/background:#fff;/*背景颜色*/
	margin:50px auto 30px; border-radius:5px;/*Html5 圆角*/}
#qq p{font-size:12px; color:#666; font-family:"微软雅黑";
		line-height:45px; text-indent:20px;}
#qq .message{width:100%; height:100%;margin:0px auto; outline:none;
			border:1px solid #ddd; /*粗细 风格 颜色*/}
#qq .But{width:100%;height:auto;margin:15px auto 0px; position:relative;/*相对，参考对象*/}
#qq .But img.bq{float:left;/*左浮动*/}
#qq .But span.submit{width:80px;height:30px; background:#ff8140;					display:block; float:right;/*右浮动*/								line-height:30px;border-radius:5px;								cursor:pointer;/*手指*/color:#fff;font-size:12px;					text-align:center;font-family:"微软雅黑";}

/*face begin*/
#qq .But .face{width:390px; height:160px; background:#fff; padding:10px;
				border:1px solid #ddd; box-shadow:2px 2px 3px #666;
				position:absolute;/*绝对定位*/ top:21px; left:15px;
				display:none;/*隐藏*/}
#qq .But .face ul li{width:22px;height:22px;
				list-style-type:none;/*去掉圆点*/ float:left;
				margin:2px; cursor:pointer;}

/*msgCon begin*/
.msgCon{width:100%;height:500px; margin:0px auto;}
.msgCon .msgBox{ background:#fff;
				padding:10px; margin-top:20px;}
.msgCon .msgBox dl{height:60px; border-bottom:1px dotted #ddd;}
.msgCon .msgBox dl dt{width:50px; height:50px;float:left;}
.msgCon .msgBox dl dt img{border-radius:25px;}
.msgCon .msgBox dl dd{width:500px; height:50px;  line-height:50px;float:right; font-size:16px;font-family:"微软雅黑";}
.msgCon .msgBox .msgTxt{font-size:12px; color:#666; line-height:25px;}

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

